<h2>LAB: GAMELIB</h2>
<p>In this lab I'll try to keep a record of a Javascript game
   library I'm using which brings together a few 3rd party
   libraries and defines a set of helper functions and objects
   to encapsulate some of the complexities and provide a reusable
   API. At the end of the lab I'll demonstrate it's use in a
   WebGL application. 
<p/>
<p><a href="http://aerotwist.com/lab/getting-started-with-three-js/">Paul</a>
   has a great write up on getting started with
   <a href="https://github.com/mrdoob/three.js">Three.js</a>,
   which I used amongst other resources to get running
   with the library quickly.
</p>

<h3>1. Introduction</h3>
<p>gamelib is a single Javascript file containing the minified versions
   of both <a href="https://github.com/mrdoob/three.js">Three.js</a>,
   <a href="http://code.google.com/p/box2dweb/">Box2DWeb</a> and
   mrdoob's <a href="http://github.com/mrdoob/stats.js">Stats</a>
   fps overlay and cross-browser requestAnimationFrame support.
</p>

<h3>2. gamelib.Object</h3>
<p>An object used to represent both the physical and
   visual presences of an object in the world. It defines an init()
   method which is called to construct the Object's physical
   and visual properties and add it to the world. If dynamic is
   true, the update() method will be called once every game loop
   to update the Object's visual state from changes in it's physical
   properties.
</p>
<pre>

    function Object() {}
    
    Object.prototype.init = function (x, y, z, geometry, material, fixture, dynamic)
    
    Object.prototype.update = function ()

</pre>
<p>gamelib.Object could be used directly, but it requires you pass in
   THREE and Box2DWeb constructs like geometry and material. Instead,
   to avoid the repetition of what is generally cookie-cut code, the
   following helper functions should be used to construct gamelib.Object
   instances.
</p>

<h3>3. gamelib.Box</h3>
<p>Returns a gamelib.Object that has the physical and visual properties
   of a box. properties can defines any of the following:
   <ol><li>dynamic - if true the Box is available for physical change
           and receives update() calls
       </li>
       <li>color - hex colour value i.e. bright green is 0x00ff00
       </li>
       <li>map - a THREE.Texture to texture the box with
       </li>
       <li>density, friction, restitution - physical properties of the Box
       </li>
       <li>and any other THREE.MeshPhongMaterial properties can be defined
       </li>
   </ol>
</P>
<pre>

    function Box(x, y, z, width, height, depth, properties)

</pre>
<p>Usage: Here is an example of creating a rotating, textured box. 
</p>
<pre>

    var texture = new gamelib.THREE.Texture(img),
        box;
    texture.needsUpdate = true;
    box = gamelib.Box(0, 0, 0, 10, 10, 10, {map: texture});
    box.angle = 0;
    box.update = function () {
        box.body.SetAngle(box.angle += 0.01);
        gamelib.Object.prototype.update.call(box);
    };

</pre>

<h3>4. Lights</h3>
<p>To light the world so you can actually see objects and colour, there
   are a variety of lights available. The following helper functions
   add lights to the world and return an instance of the created THREE.Light. 
</p>
<pre>

    function DirectionalLight(x, y, z, hex, intensity)
    
    function AmbientLight(hex)
    
    function PointLight(x, y, z, hex, intensity)

</pre>

<h3>5. gamelib all wrapped up</h3>
<p>The gamelib library finally namespaces everything inside an object to
   exposes functions, objects and properties that are intended to be public.
</p>
<pre>

    var gamelib = {
        THREE: THREE,
        Box2D: Box2D,
        stats: new Stats,
        PHYSICS_DT: 1 / 60,
        PI180: Math.PI / 180,
        DEFAULT_DENSITY: 1,
        DEFAULT_FRICTION: 0.1,
        DEFAULT_RESTITUTION: 0.8,
        camera: new THREE.Camera(33, window.innerWidth / window.innerHeight, 1, 100000),
        world: new Box2D.Dynamics.b2World(new Box2D.Common.Math.b2Vec2(0, 0), true),
        scene: new THREE.Scene,
        renderer: new THREE.WebGLRenderer,
        Object: Object,
        Box: Box,
        DirectionalLight: DirectionalLight,
        AmbientLight: AmbientLight,
        PointLight: PointLight,
        play: play,
        dynamics: [],
        dynamic: 0,
        time: 0
    };

</pre>
<div id="experiments">
    <a href="/app.html?lab/game"><img alt="game" src="http://i1212.photobucket.com/albums/cc458/Stephen_Carmody/game.jpg"/>
    <br/><b>MAGNETIC LEVITATING PLATFORMS</b></a>
    <a href="/app.html?lab/texturedcube"><img alt="texturedcube" src="http://i1212.photobucket.com/albums/cc458/Stephen_Carmody/texturedcube.jpg"/>
    <br/><b>URL IMAGE TEXTURED CUBE</b></a>
</div>
